<template>
<div class="banner">
	<div @click="showSwiper">
		<div class="datu">
			<img src="//img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_600x330_e8437d6f.jpg">
		</div>
		<div class="title">
			秦始皇陵博物院（兵马俑）(AAAAA景区)
		</div>
	</div>
	<div class="img-swiper" v-show="imgSwiper" @click="hideSwiper">
		 <swiper :options="swiperOption">
		 <swiper-slide v-for="img in swiperImgs" :key="img.id">
		 	<img :src="img.imgUrl">
		 	 </swiper-slide>
		 	  </swiper>
		 	<div class="swiper-pagination"  slot="pagination"></div>
	</div>
</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return{
				imgSwiper:false,
				swiperImgs:[
					{
						id:"01",
						imgUrl:"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_350x240_f91cf230.jpg"
					},
					{
						id:"02",
						imgUrl:"http://img1.qunarzz.com/sight/p0/1411/f1/e873b2fbd89ff77b24ac2b66502f649d.water.jpg_350x240_a91b68e6.jpg"
					},
					{
						id:"03",
						imgUrl:"http://img1.qunarzz.com/sight/p0/1505/ef/efe741d5df230aaf.water.jpg_350x240_fef41a25.jpg"
					},
					{
						id:"04",
						imgUrl:"http://img1.qunarzz.com/sight/p0/1411/99/edb495c18c6076e91f76d39ab899eb5a.water.jpg_350x240_51370700.jpg"
					},
					{
						id:"05",
						imgUrl:"http://img1.qunarzz.com/sight/p0/201304/27/cdb8f69533a643c6c8d65eac.jpg_350x240_f13340d8.jpg"
					},
					{
						id:"06",
						imgUrl:"//img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_600x330_e8437d6f.jpg"
					},
					{
						id:"07",
						imgUrl:"http://img1.qunarzz.com/sight/p0/1411/6f/9e2a73e12689fc87f27e7f4a252b74b0.water.jpg_350x240_4d35a617.jpg"
					},
					{
						id:"08",
						imgUrl:"http://img1.qunarzz.com/sight/p0/201403/04/2f5056add32dfdcf446bf83d0a7d638b.jpg_350x240_ff0e5b23.jpg"
					}
				],
				swiperOption:{
					pagination:{
						el: '.swiper-pagination',
    					type: 'fraction',
					},
					loop:true,
					// autoplay:{//自动播放
					// 	delay:1000,
					// 	stopOnLastSlide:false,
					// 	disableOnInteraction:false,
					// }
				}
			}
		},
		methods:{
			showSwiper(){
				this.imgSwiper=true;
			},
			hideSwiper(){
				this.imgSwiper=false;
			},
		}
	}
</script>


<style scoped>
	.banner{
		position: relative;
		overflow: hidden;
	}
	.datu{
		width:100%;
		height:0;
		padding-bottom: 55%;
		overflow: hidden;
	}
	.datu img{
		width:100%;
	}
	.title{
		font-size:.36rem;
		color:#fff;
		position: absolute;
		left:.4rem;
		bottom:.4rem;
		text-shadow: 0 1px 2px rgba(0,0,0,0.70);
	}
	.img-swiper{
		width:100%;
		position: fixed;
		top:0;
		bottom:0;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}
	.img-swiper img{
		width:100%;
	}
	.swiper-pagination-fraction{
		bottom: 1rem;
    	left: 0;
    	color:#fff;
    	width: 100%;
	}
</style>